import { GameObject } from './GameObject'
import { Position, IPosition } from './Position'
export enum Direction {
  Up = 'ArrowUp',
  Down = 'ArrowDown',
  Left = 'ArrowLeft',
  Right = 'ArrowRight',
}
export class Snake extends GameObject {
  el: HTMLElement
  isAlive = true
  direction = 'ArrowRight'
  speed = 10 //每次移动格数
  private frequencyInt = 550 //移动频率 单位ms
  private frequency = this.frequencyInt //
  private snakeHead: HTMLElement
  protected _position: Position
  constructor(x: number, y: number) {
    super()
    this.el = document.getElementById('snake')!
    this.snakeHead = document.getElementById('snakeHead')!
    this._position = new Position(x, y)
    this.resetBody()
  }
  //改变坐标确保不会越界,越界后让isAlive=false
  setPosition(val: IPosition) {
    this._position.positionX = val.positionX
    this._position.positionY = val.positionY
    if (this._position.positionX < 0 || this._position.positionX > 290) {
      return (this.isAlive = false)
    }
    if (this._position.positionY < 0 || this._position.positionY > 290) {
      return (this.isAlive = false)
    }
  }
  get position(): Position {
    return this._position
  }
  /**
   *
   * @returns 未撞墙返回true，撞墙后返回false
   */
  move(): boolean {
    if (!this.isAlive) return this.isAlive
    switch (this.direction) {
      case Direction.Up: //向上Y轴减少
        this.setPosition({
          positionX: this._position.positionX,
          positionY: this._position.positionY - this.speed,
        })
        break
      case Direction.Right: //向右X轴增加
        this.setPosition({
          positionX: this._position.positionX + this.speed,
          positionY: this._position.positionY,
        })
        break
      case Direction.Down: //向下Y轴增加
        this.setPosition({
          positionX: this._position.positionX,
          positionY: this._position.positionY + this.speed,
        })
        break
      case Direction.Left: //向左X轴减少
        this.setPosition({
          positionX: this._position.positionX - this.speed,
          positionY: this._position.positionY,
        })
        break
      default:
        break
    }
    //更新蛇身
    let childList = this.el.children
    for (let index = childList.length - 1; index > 0; index--) {
      const element = childList[index]
      const prevelement = childList[index - 1]
      element.setAttribute('style', prevelement.getAttribute('style')!)
    }
    //更新蛇头坐标到当前位置
    this.snakeHead.style.left = this.position.positionX + 'px'
    this.snakeHead.style.top = this.position.positionY + 'px'
    //判断蛇头坐标是否和蛇身重叠
    for (let index = 1; index < this.el.children.length; index++) {
      const elementStyle = this.el.children[index]
        .getAttribute('style')!
        .split(';')
      const headStyle = this.snakeHead.getAttribute('style')!.split(';')
      // elementStyle[0]是left: XXpx， elementStyle[1]是top：XXpx
      if (
        elementStyle[0] === headStyle[0] &&
        elementStyle[1] === headStyle[1]
      ) {
        return (this.isAlive = false)
      }
    }
    return this.isAlive
  }
  levelUP(time: number) {
    this.frequency - time > 0 ? (this.frequency -= time) : this.frequency
  }
  groupUp() {
    //生成元素并调整位置
    this.el.insertAdjacentHTML('beforeend', '<div></div>')
    let count = this.el.children.length
    let prev: Element | null, last: Element | null
    if (count > 1) {
      prev = this.el.children.item(count - 2)
    } else {
      prev = this.snakeHead
    }
    last = this.el.children.item(count - 1)
    last?.setAttribute('style', prev?.getAttribute('style')!)
  }
  moveFaster(level: number) {
    this.frequency = this.frequencyInt - level * 50
  }
  get moveSpeed() {
    return this.frequency
  }
  resetBody(){
    while(this.el.children.length!=1){
      this.el.removeChild(this.el.lastChild!)
    }
  }
}
